<template>
  <div class="container">
    <div class="star-box">
      <!-- 道岔位置 -->
      <div class="turnout turnout-1"></div>
      <div class="turnout turnout-2"></div>
      <div class="turnout turnout-3"></div>
      <!-- 车站位置 -->
      <div
        class="station"
        v-for="item in station"
        :key="item.id"
        :style="{ left: item.x + 'px' }"
      >
        {{ item.name }}
      </div>
      <!-- 上行星链设备 -->
      <div
        class="star"
        v-for="item in upStarDeviceList"
        @click="item.showAlert = !item.showAlert"
        :style="{ left: item.x + 'px', top: item.y + 'px' }"
        :key="item.id"
      >
        <!-- 具备感知功能的星链 -->
        <img
          v-if="item.device === 1"
          src="../../assets/img/device-1.png"
          alt=""
        />
        <!-- 雷达 -->
        <img
          class="radar"
          :style="{
            transform: `rotate(${item.radar.direction}deg)`,
            left: item.radar.x + 'px',
            top: item.radar.y + 'px',
          }"
          v-if="item.device === 1"
          src="../../assets/img/radar-1.png"
          alt=""
        />
        <div class="alert-box" v-if="item.showAlert && item.device !== 3">
          <div>
            <p>ID：{{ item.info.id }}</p>
            <p>Link：{{ item.info.link }} offset:{{ item.info.offset }}</p>
            <p>延迟：{{ item.info.delay }}</p>
            <p>温度：{{ item.info.temperature }}</p>
            <p>cpu占有率：{{ item.info.cpu }}</p>
          </div>
        </div>
        <div class="alert-box-2" v-if="item.showAlert && item.device === 3">
          <div>
            <p>ID：{{ item.info.id }}</p>
            <p>Link：{{ item.info.link }} offset:{{ item.info.offset }}</p>
            <p>故障原因：{{ item.errorInfo.result }}</p>
            <p>时间：{{ item.errorInfo.time }}</p>
          </div>
        </div>
        <!-- 具备Mesh+感知功能的星链 -->
        <img
          v-if="item.device === 2"
          src="../../assets/img/device-2.png"
          alt=""
        />

        <!-- 雷达 -->
        <img
          class="radar"
          :style="{
            transform: `rotate(${item.radar.direction}deg)`,
            left: item.radar.x + 'px',
            top: item.radar.y + 'px',
          }"
          v-if="item.device === 2"
          src="../../assets/img/radar-2.png"
          alt=""
        />
        <!-- 故障星链 -->
        <img
          v-if="item.device === 3"
          src="../../assets/img/device-3.png"
          alt=""
        />
        <!-- 雷达 -->
        <img
          class="radar"
          :style="{
            transform: `rotate(${item.radar.direction}deg)`,
            left: item.radar.x + 'px',
            top: item.radar.y + 'px',
          }"
          v-if="item.device === 3"
          src="../../assets/img/radar-3.png"
          alt=""
        />
      </div>
      <!-- 下行星链设备 -->
      <div
        class="star"
        v-for="item in downStarDeviceList"
        @click="item.showAlert = !item.showAlert"
        :style="{ left: item.x + 'px', top: item.y + 'px' }"
        :key="item.id"
      >
        <!-- 具备感知功能的星链 -->
        <img
          v-if="item.device === 1"
          src="../../assets/img/device-1.png"
          alt=""
        />
        <!-- 雷达 -->
        <img
          class="radar"
          :style="{
            transform: `rotate(${item.radar.direction}deg)`,
            left: item.radar.x + 'px',
            top: item.radar.y + 'px',
          }"
          v-if="item.device === 1"
          src="../../assets/img/radar-1.png"
          alt=""
        />
        <div
          class="alert-box down-alert"
          v-if="item.showAlert && item.device !== 3"
        >
          <div>
            <p>ID：{{ item.info.id }}</p>
            <p>Link：{{ item.info.link }} offset:{{ item.info.offset }}</p>
            <p>延迟：{{ item.info.delay }}</p>
            <p>温度：{{ item.info.temperature }}</p>
            <p>cpu占有率：{{ item.info.cpu }}</p>
          </div>
        </div>
        <div
          class="alert-box-2 down-error"
          v-if="item.showAlert && item.device === 3"
        >
          <div>
            <p>ID：{{ item.info.id }}</p>
            <p>Link：{{ item.info.link }} offset:{{ item.info.offset }}</p>
            <p>故障原因：{{ item.errorInfo.result }}</p>
            <p>时间：{{ item.errorInfo.time }}</p>
          </div>
        </div>
        <!-- 具备Mesh+感知功能的星链 -->
        <img
          v-if="item.device === 2"
          src="../../assets/img/device-2.png"
          alt=""
        />

        <!-- 雷达 -->
        <img
          class="radar"
          :style="{
            transform: `rotate(${item.radar.direction}deg)`,
            left: item.radar.x + 'px',
            top: item.radar.y + 'px',
          }"
          v-if="item.device === 2"
          src="../../assets/img/radar-2.png"
          alt=""
        />
        <!-- 故障星链 -->
        <img
          v-if="item.device === 3"
          src="../../assets/img/device-3.png"
          alt=""
        />
        <!-- 雷达 -->
        <img
          class="radar"
          :style="{
            transform: `rotate(${item.radar.direction}deg)`,
            left: item.radar.x + 'px',
            top: item.radar.y + 'px',
          }"
          v-if="item.device === 3"
          src="../../assets/img/radar-3.png"
          alt=""
        />
      </div>
    </div>
    <!-- 设备图标提示 -->
    <ul class="device-tips">
      <li>
        <img src="../../assets/img/device-2.png" alt="" />
        具备Mesh+感知功能的星链
      </li>
      <li>
        <img src="../../assets/img/device-1.png" alt="" /> 具备感知功能的星链
      </li>
      <li><img src="../../assets/img/device-3.png" alt="" /> 故障星链</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      station: [
        {
          id: 1,
          name: '金顶街站',
          x: 300,
        },
        {
          id: 2,
          name: '金安桥站',
          x: 1200,
        },
        {
          id: 3,
          name: '北辛安路站',
          x: 2000,
        },
        {
          id: 4,
          name: '首钢站',
          x: 2350,
        },
      ],
      downStarDeviceList: [
        {
          x: 50,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e01',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 120,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e02',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 140,
          y: 80,
          radar: {
            direction: -30,
            x: -2,
            y: -10,
          },
          id: '0x2e03',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 240,
          y: 80,
          radar: {
            direction: 240,
            x: -28,
            y: -10,
          },
          id: '0x2e04',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 240,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e05',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 300,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e06',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 420,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e07',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 430,
          y: 80,
          radar: {
            direction: -30,
            x: -2,
            y: -10,
          },
          id: '0x2e08',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 500,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e09',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 600,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e10',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 680,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e11',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 760,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e12',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 840,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e13',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 920,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e14',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1000,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e15',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1080,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e16',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1160,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e17',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 1240,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e18',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1320,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e19',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1400,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e20',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1480,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e21',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1560,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e22',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1640,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e23',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1720,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e24',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1800,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e25',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1880,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e26',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1940,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e27',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2020,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e28',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2100,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e29',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2160,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e30',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2240,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e31',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 2240,
          y: 80,
          radar: {
            direction: -30,
            x: -2,
            y: -10,
          },
          id: '0x2e32',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2320,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e33',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2400,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e34',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2480,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e35',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2560,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e36',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2640,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e37',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2720,
          y: 130,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e38',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
      ],
      upStarDeviceList: [
        {
          x: 50,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e39',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: true,
          device: 3, // 1 2 3
        },
        {
          x: 120,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e40',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 140,
          y: 10,
          radar: {
            direction: 60,
            x: 4,
            y: 8,
          },
          id: '0x2e41',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 240,
          y: 10,
          radar: {
            direction: 140,
            x: -24,
            y: 18,
          },
          id: '0x2e42',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 300,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e43',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 380,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e44',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 540,
          y: 10,
          radar: {
            direction: 140,
            x: -24,
            y: 18,
          },
          id: '0x2e45',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 480,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e46',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 560,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e47',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 640,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e48',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 720,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e49',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 800,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e50',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 880,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e51',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 960,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e52',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1040,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e53',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1120,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e54',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1200,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e55',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1280,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e56',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 1360,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e57',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1440,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e58',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1520,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e59',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1600,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e60',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1680,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e61',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1760,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e62',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1840,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e63',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 1920,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e64',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2000,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e65',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2080,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e66',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 2160,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e67',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2240,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e68',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2320,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e69',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 2, // 1 2 3
        },
        {
          x: 2340,
          y: 10,
          radar: {
            direction: 140,
            x: -24,
            y: 18,
          },
          id: '0x2e70',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2400,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e71',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2480,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e72',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2560,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e73',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
        {
          x: 2640,
          y: -50,
          radar: {
            direction: 180,
            x: -30,
            y: 8,
          },
          id: '0x2e74',
          info: {
            id: '0x2e01',
            link: 25,
            offset: 1330,
            delay: '10ms',
            temperature: '30℃',
            cpu: '65%',
          },
          errorInfo: {
            result: 'xxx',
            time: '2021-06-25 13:13:13',
          },
          showAlert: false,
          device: 1, // 1 2 3
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  height: calc(100vh - 300px - 40px - 65px - 55px);
  position: relative;
  width: 100%;
  overflow-x: auto;
  .device-tips {
    list-style: none;
    position: absolute;
    bottom: 40px;
    padding: 0;
    margin: 0;
    padding-left: 20px;
    li {
      display: inline-block;
      margin-right: 20px;
      img {
        vertical-align: middle;
      }
    }
  }
}
.star-box {
  border-top: 5px solid #0091ff;
  border-bottom: 5px solid #0091ff;
  height: 120px;
  position: absolute;
  top: calc(50% - 60px);
  width: 2800px;
  .turnout {
    width: 300px;

    height: 120px;
    position: absolute;
    transform: skew(-30deg);
  }
  .turnout-1 {
    left: 200px;
    border: 5px solid #0091ff;
    top: -5px;
  }
  .turnout-2 {
    left: 200px;
    transform: skew(30deg);
    border-left: 5px solid #0091ff;
    top: -5px;
  }
  .turnout-3 {
    left: 2300px;
    top: -5px;
    border-left: 5px solid #0091ff;
  }
  .station {
    width: 100px;
    top: 40px;
    height: 40px;
    border: 3px solid #0091ff;
    position: absolute;
    color: #0091ff;
    font-size: 16px;
    text-align: center;
    line-height: 32px;
    border-radius: 4px;
  }
  .station::before {
    content: '';
    width: 80px;
    height: 3px;
    background: #0091ff;
    display: block;
    position: absolute;
    top: -10px;
    left: 8px;
  }
  .station::after {
    content: '';
    width: 80px;
    height: 3px;
    background: #0091ff;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 8px;
  }
  .star {
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: pointer;
    .radar {
      position: absolute;
      left: 0;
    }
  }
  .alert-box {
    width: 175px;
    background: url('../../assets/img/success.png') no-repeat 0px 0px;
    height: 111px;
    box-sizing: border-box;
    position: absolute;
    left: 44px;
    bottom: 50px;
    z-index: 10;
    div {
      background: #fff;
      margin-left: 20px;
      padding-left: 4px;
      margin-right: 6px;
      margin-top: 12px;
    }
    p {
      padding: 0;
      margin: 0;
      line-height: 17px;
      font-size: 13px;
      color: #0091ff;
    }
  }

  .alert-box::after {
    display: block;
    content: '';
    width: 2px;
    height: 70px;
    position: absolute;
    left: -18px;
    bottom: -9px;
    transform: rotate(30deg);
    background: #6ec1ff;
  }
  .down-alert {
    left: 44px;
    top: 20px;
  }
  .down-alert::after {
    width: 2px;
    height: 70px;
    left: -18px;
    top: -9px;
    transform: rotate(-30deg);
    background: #6ec1ff;
  }
  .alert-box-2 {
    width: 167px;
    background: url('../../assets/img/error.png') no-repeat 0px 0px;
    height: 82px;
    box-sizing: border-box;
    position: absolute;
    left: 44px;
    bottom: 50px;
    z-index: 10;
    div {
      margin-left: 14px;
      margin-right: 6px;
      background: #fff;
      padding-left: 4px;
      margin-top: 8px;
    }
    p {
      padding: 0;
      margin: 0;
      line-height: 14px;
      font-size: 12px;
      color: #ff4242;
    }
  }
  .alert-box-2::after {
    display: block;
    content: '';
    width: 2px;
    height: 60px;
    position: absolute;
    left: -16px;
    bottom: -9px;
    transform: rotate(30deg);
    background: #ff7979;
  }
  .down-error {
    left: 44px;
    top: 30px;
  }
  .down-error::after {
    width: 2px;
    height: 60px;
    left: -16px;
    top: -20px;
    transform: rotate(-30deg);
    background: #ff7979;
  }
}
</style>
